HOME > js

[자바스크립트] 캔버스에 그라디언트 색 그리는 방법

Last Modified : 2023-10-22 / Created : 2023-10-21

488
View Count

주소 복사하기

자바스크립트에서 캔버스 요소에 그라디언트(그라데이션) 색 효과를 그리려고 합니다. 어떻게 하면 되는지 아래에서 자세히 알아봅니다.

자바스크립트를 사용하여 캔버스 그라디언트 효과 그리기

위 제목은 캔버스를 사용하여 구현한 이미지를 사용하였습니다. 처음에는 그라디언트 효과가 배경색 추가하는 것처럼 간단하다고 생각했는데 적용이 되지 않았습니다. 보통 배경색은 아래처럼 색을 추가하죠.

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 640, 400) ;

위 코드는 컨텍스트 요소에 빨간색 배경을 색칠하는 방법입니다. 그라디언트는 위와 같이 사용할 수 없습니다. 즉 아래와 같이 입력하면 에러가 발생합니다.

// CSS처럼 사용시 에러가 발생
ctx.fillStyle = 'linear-gradient(to-right, red, black)';

캔버스도 css처럼 사용할 수 있다면 편리할텐데 말이죠. 어쨌든 그래서 방법을 알아봅니다. 아래의 순서에 따라 단계별로 알려드리겠습니다.

1. 캔버스 설정하기

가장 먼저 HTML 캔버스 요소를 생성해야겠죠. 먼저 640, 400 크기의 캔버스 요소를 추가합니다.

2. 캔버스 컨텍스트 얻기, context

다음으로 자바스크립트를 사용하여 캔버스의 2D 그리기 컨텍스트에 접근해야 합니다.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

여기까지는 기존의 전경색 사용 방법과 동일합니다. 아래부터는 차이가 있습니다.

3. 선형 그라데이션 생성하기

캔버스에서 그라데이션을 생성하기 위해서는 createLinearGradient 메소드를 사용합니다. 이 메소드는 선형 그라데이션(Linear Gradient)을 생성합니다. 또한 그라데이션의 시작점과 종료점의 x, y 좌표 네 개의 인수를 필요로 하죠.

ctx.createLinearGradient(x0, y0, x1, y1);

// x0, y0 : 그라데이션의 시작점의 x 및 y 좌표
// x1, y1 : 그라데이션의 종료점의 x 및 y 좌표

[ 참고사항 ] 이 좌표들을 사용해 그라데이션의 방향 및 위치를 결정할 수 있습니다. 예를 들어, 세로 방향의 그라데이션을 생성하려면 시작점과 종료점의 x 좌표를 동일하게 유지하면 되며, 가로 방향의 그라데이션을 생성하려면 y 좌표를 동일하게 유지하면 됩니다. 방향을 변경하는 방법은 맨 아래에서 다시 다루겠습니다!

그래서 위 방법을 사용해 아래와 같이 createLinearGradient() 함수를 사용할 수 있습니다.

let gradient = ctx.createLinearGradient(0, 0, 0, 150);

다음으로 색을 추가해야하겠죠.

4. 컬러 스톱 추가하기

그라데이션 객체에 addColorStop() 메서드를 사용하여 색상을 정의할 수 있습니다. 또한 그라데이션 내에서 어디에 표시될지 결정합니다.

gradient.addColorStop(offset, color);

// offset : 0 과 1 사이의 값으로 처음 또는 끝의 위치를 결정
// color: 적용할 그라디언트 색을 결정

위 함수를 사용해 아래와 같이 처음에 빨간색을 그리고 마지막에 파란색을 적용하는 것이 가능합니다.

gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

5. 그라데이션을 채우고 사각형 그리기

이제 위에서 생성한 그라데이션을 채우고 사각형을 그리면 모든 과정은 끝이나게됩니다.

ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 150);

여기까지 가장 기본적인 예제를 사용하여 그라데이션 효과를 직접 구현해보았습니다. 전경색을 사용해 사각형을 그리는 것보다는 조금 더 복잡한 편입니다.

그라데이션 방향 바꾸는 방법

위에서 잠깐 얘기했지만 만약 그라데이션의 방향을 가로로 바꾸고 싶다면? 이 경우 createLinearGradient 메서드의 인수를 조절하면 됩니다. css에서는 'to top', 'to left' 처럼 쉽게 사용할 수 있었는데 비하여는 조금 어려운 편이죠.

간단하게 예를 들어, 다음과 같이 변경하면 왼쪽에서 오른쪽으로 그라데이션을 만들 수 있습니다.

let gradient = ctx.createLinearGradient(0, 0, 150, 0);

이렇게 캔버스에 그라데이션 색상을 적용하는 방법을 알아보았습니다.

마치면서

개인적으로 캔버스 요소를 많이 사용하는 편입니다. 캔버스에 이미지 파일을 다운로드 받는 등등 캔버스 만의 장점도 많은데 위와 같이 다양한 색상과 방향으로 응용하여 그라디언트 효과를 추가하는 것도 좋은 결과물을 만들 수 있습니다.

canvas gradient

아래의 글도 찾고 계시지 않나요?

[momentjs] 오늘 날짜와 특정 날짜가 얼마나 차이나는 지 일, 시, 분 단위로 알아내기

자바스크립트 마우스휠 사용시 스크롤 방향 알아내는 방법은?